<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useVbenForm } from '#/adapter/form';
// import { addOrEidtMenu } from '#/api';

const emits = defineEmits(['onSuccess']);
const currentData = ref({});
const [BaseForm, formApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入公司名称',
      },
      fieldName: 'companyName',
      label: '公司名称',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '用户名称',
      },
      fieldName: 'loginName',
      label: '用户名称',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '姓名',
      },
      fieldName: 'name',
      label: '姓名',
      rules: 'required',
    },
    {
      component: 'RadioGroup',
      defaultValue: '0',
      componentProps: {
        isButton: true,
        options: [
          {
            label: '男',
            value: '0',
          },
          {
            label: '女',
            value: '1',
          },
        ],
      },
      fieldName: 'sex',
      label: '性别',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入手机号',
      },
      fieldName: 'tel',
      label: '手机号',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入密码',
      },
      fieldName: 'password',
      label: '密码',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入邮箱',
      },
      fieldName: 'email',
      label: '邮箱',
      rules: 'required',
    },
  ],
  showDefaultActions: false,
  wrapperClass: 'grid-cols-1',
});
const [Modal, modalApi] = useVbenModal({
  title: '用户添加',
  onOpenChange(isOpen) {
    if (isOpen) {
      initData();
    }
  },
  onConfirm() {
    onSubmit();
  },
});

const initData = async () => {
  const data = modalApi.getData();
  currentData.value = data.records;

  if (data.type === 'edit') {
    const rows = data.records;
    formApi.setValues({ ...rows });
  } else {
    await formApi.resetForm();
  }
};

/** 提交 */
const onSubmit = async () => {
  const data = modalApi.getData();
  const values = await formApi.getValues();
  const params = { ...values };
  modalApi.close();

  // if (data.type === 'edit') {
  //   params.id = unref(currentData)._id;
  // }
  // await addOrEidtMenu(params, data.type);
  // message.success(data.type === 'edit' ? '修改成功' : '添加成功');
  // modalApi.close();
  // emits('onSuccess');
};
</script>
<template>
  <Modal class="w-[550px]"> <BaseForm /> </Modal>
</template>
